<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title>欢迎页面-X-admin2.2</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="../css/admin/font.css">
  <link rel="stylesheet" href="../css/admin/xadmin.css">
  <script src="../js/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="../js/xadmin.js"></script>
  <script type="text/javascript" src="../js/checkAdmin.js"></script>
</head>

<body>
  
  <div class="x-nav">
    <span class="layui-breadcrumb">
      <a href="">首页</a>
      <a href="">演示</a>
      <a>
        <cite>导航元素</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
      onclick="location.reload()" title="刷新">
      <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
  </div>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">

      <div class="layui-col-md12">

        <div class="layui-card">
          <div class="layui-card-body ">
            <div class="layui-collapse" lay-filter="test">
              <div class="layui-colla-item">
                <h2 class="layui-colla-title">条件筛选<i class="layui-icon layui-colla-icon"></i></h2>
                <div class="layui-colla-content">
                  <form class="layui-form" id="fr" action="">
                    <div class="layui-form-item">

                      <div class="layui-form-item">
                        <label for="bTitle" class="layui-form-label">
                          书名</label>
                        <div class="layui-input-inline">
                          <input type="text" id="bTitle" name="bTitle" autocomplete="off" class="layui-input"></div>
                      </div>

                      <div class="layui-form-item">
                        <label for="author" class="layui-form-label">
                          作者</label>
                        <div class="layui-input-inline">
                          <input type="text" id="author" name="author" autocomplete="off" class="layui-input"></div>
                      </div>

                      <div class="layui-form-item">
                        <label for="readNum" class="layui-form-label">
                          大于此阅读量</label>
                        <div class="layui-input-inline">
                          <input type="text" id="readNum" name="readNum" autocomplete="off" class="layui-input"></div>
                      </div>

                      <div class="layui-form-item">
                        <label for="goodNum" class="layui-form-label">
                          大于此点赞量</label>
                        <div class="layui-input-inline">
                          <input type="text" id="goodNum" name="goodNum" autocomplete="off" class="layui-input"></div>
                      </div>

                      <div class="layui-inline">
                        <label class="layui-form-label">搜索类型</label>
                        <div class="layui-input-inline">
                          <select name="cate" id="cate" lay-filter="category" lay-search="">
                            <option value="">直接选择或搜索选择</option>
                          </select>
                        </div>
                      </div>
                    </div>

                    <div class="layui-form-item">
                      <div class="layui-input-block demo1">
                        <div class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</div>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <div class="layui-card-header demoDel">
              <button class="layui-btn" lay-event="add" onclick="xadmin.open('添加用户', 'book-add.html', 560, 500)"><i
                  class="layui-icon"></i>添加书籍</button>
            </div>
          </div>



          <!-- 表格 -->
          <table class="layui-table layui-form" lay-filter="test" id="tab"></table>

        </div>
      </div>
    </div>
  </div>
</body>

<!-- 操作按钮 -->
<script type="text/html" id="barDemo">
  <button class="layui-btn layui-btn layui-btn-xs" id="add" lay-event="add" >
    <i class="layui-icon"></i>添加章节</button>
  <button class="layui-btn layui-btn layui-btn-xs" id="edit" lay-event="edit" >
    <i class="layui-icon">&#xe642;</i>编辑</button>

  {{#  if(d.status == 0 ){ }}
  <button class="layui-btn-danger layui-btn layui-btn-xs" id="del" lay-event="del" href="javascript:;">
    <i class="layui-icon">&#xe640;</i>启用</button>
  {{#  } else { }}
  <button class="layui-btn-danger layui-btn layui-btn-xs" id="del" lay-event="del" href="javascript:;">
    <i class="layui-icon">&#xe640;</i>下架</button>
  {{#  } }}
</script>

<!-- 图片转化 -->
<script type="text/html" id="img">
  <img src="{{d.bPicture}}" style="width: 70px" />
</script>

<!-- 状态转化 -->
<script type="text/html" id="status">
  {{#  if(d.status == 0 ){ }}
    已下架
  {{#  } else { }}
    正常      
  {{#  } }}
</script>

<script type="text/javascript">
  layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
    var laydate = layui.laydate //日期
      , laypage = layui.laypage //分页
      , layer = layui.layer //弹层
      , table = layui.table //表格
      , carousel = layui.carousel //轮播
      , upload = layui.upload //上传
      , element = layui.element //元素操作
      , slider = layui.slider //滑块
      , $ = layui.jquery
      , form = layui.form; // 表单

      var index = layer.load(1, {shade: false,});

    // 表格渲染
    table.render({
      elem: '#tab'
      , id: 'tableId'
      , url: "http://127.0.0.1:8001/after/book/showAll"
      , method: 'post'
      , response: { statusCode: 200 } //重新规定成功的状态码为 200，table 组件默认为 0
      , page: true //禁止分页
      , cellMinWidth: 10 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      , skin: 'line' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
      , cols: [[
        { field: 'bId', title: 'ID', align: 'center', templet: '' }  //templet:自定义模板,可以用作处理后台的数据再进行展示
        , { field: 'bTitle', title: '书名', align: 'center', templet: '' }
        , { field: 'bPicture', title: '封面', align: 'center', templet: '#img', style: "width:auto;"}
        , { field: 'readNum', title: '阅读量', align: 'center', templet: '', sort: true }
        , { field: 'goodNum', title: '点赞量', align: 'center', templet: '', sort: true }
        , { field: 'author', title: '作者', align: 'center', templet: '' }
        , { field: 'cate', title: '类型', align: 'center', templet: '' }
        , { field: 'status', title: '状态', align: 'center', templet: '#status', sort: true }
        , { field: 'introduce', title: '简介', align: 'center', templet: '' }
        , { fixed: 'right', title: '操作', align: 'center', width: 270, toolbar: '#barDemo' }
      ]]
      , done: function (res, curr, count) {
        layer.close(index)
      }
    });

    // 获取下拉框数据
    layer.ready(function () {
      $.ajax({
        url: "http://127.0.0.1:8001/after/type/showAll"
        , type: "post"
        , data: {}
        , success: function (datas) {
          if (datas.data != null) {
            $.each(datas.data, function (index, item) {
              $('#cate').append(new Option(item.cate, item.cate));// 下拉菜单里添加元素
            });
            layui.form.render("select");
          }
        }
        , error: function () {
          alert("查询类型失败！！！")
        }
      });
    });

    // 根据用户名查询， 方法重载
    $('.demo1 .layui-btn').on('click', function () {
      console.log($('#goodNum').val())
      // 执行重载
      table.reload('tableId', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        , where: {  //设定异步数据接口的额外参数，任意设  
          bTitle: $('#bTitle').val()
          , author: $('#author').val()
          , readNum: $('#readNum').val()
          , goodNum: $('#goodNum').val()
          , cate: $('#cate').val()
        }
      }, 'data');
    });


    //监听table中的工具栏,tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    table.on('tool(test)', function (obj) {
      // 获取当前行
      var data = obj.data;
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象

      // 判断操作  使用lay-event
      switch (obj.event) {
        // 添加小说章节内容
        case 'add':
          // 使用sessionStorage传递本行数据
          var storage = window.sessionStorage;
          // 想要用sessionStorage存储对象，必须先将对象转化为json字符串
          var lineData = JSON.stringify(data);
          storage.setItem('lineData', lineData);
          var bObj = document.getElementById("edit");
          bObj.onclick = add();
          function add() {
            xadmin.open('编辑', 'chapter-add.html', 1000, 600);
          }
          break;

        /* 修改基本数据 */
        case 'edit':
          // 使用sessionStorage传递本行数据
          var storage = window.sessionStorage;
          // 想要用sessionStorage存储对象，必须先将对象转化为json字符串
          var lineData = JSON.stringify(data);
          storage.setItem('lineData', lineData);
          var bObj = document.getElementById("edit");
          bObj.onclick = edit();
          function edit() {
            xadmin.open('编辑', 'book-edit.html', 560, 600);
          }
          break;

        /* 注销单个用户 */
        case 'del':
          //发异步注销用户
          $.ajax({
            url: "http://127.0.0.1:8001/after/book/deleteById"
            , type: "post"
            , data: {
              "bId": data.bId,
              "status": data.status
            }
            , success: function (datas) {
              var a = datas.msg;
              if (datas.data != null) {
                layer.alert(datas.msg
                  , { icon: 6 }
                  , function () {
                    window.location.reload();
                  });
                return false;
              }
              layer.msg('操作失败', { time: 1000 });
              return false;
            }
          });
          break;
      }
    });





  });
</script>

</html>